<template>
	<view class="pagebox">
		<div class="q_tip">
			<p class="rpx28 app_col">* Q3.<text class="rpx28 col282">{{q3title}}</text></p>
		</div>
		
		<div class="q_box">
			<div class="q_item" v-for="(item,index) in items" :key="index" > 
				<!-- <p class="q_title rpx26 app_col">可雪芬330ml单罐装</p> -->
				<div class="q_it" v-for="(it,ind) in item" :key="ind" v-if="it.value == 2">
					<image :src="it.goods_img" mode="aspectFill"></image>
					<div class="q_it_con">	
						<p class="rpx28 col666">{{it.goods_name}}</p>
						<p class="rpx28 app_col">{{it.brand}}</p>
					</div>
					<radio-group class="q_it_rd" @change="radioChange($event,index,ind)">
						<div v-if="it.q3value ==1">
							<label><radio checked value="1"/>有</label>
							<label><radio value="2"/>无</label>
						</div>
						<div v-else>
							<label><radio value="1"/>有</label>
							<label><radio checked value="2"/>无</label>
						</div>
					</radio-group>
				</div>
			</div> 
		</div>
		<navigator @click="save"  class="but88 rpx32 colfff app_bg" >下一步</navigator>
		<uni-popup class="u_p" :show="type === 'top'" position="top" mode="fixed" msg="" @hidePopup="togglePopup('')" >
			<div class="u_p_box">
				<p class="u_p_back rpx26 app_col" @click="toAnywhere(1)"><span style="width: 10upx;"></span>返回上传列表</p>
				<p class="rpx28 app_col" @click="toAnywhere(2)">* Q1.<text class="rpx28 col282">请找到该店铺饮料产品的主货架，并记录主货架中有无以下产品。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(3)">* Q2.<text class="rpx28 col282">请记录以下产品在主货架中的排面数量。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(4)">* Q3.<text class="rpx28 col282">请您到冰柜或现场的二次陈列（包括堆头. 堆箱. 端架. 陈列架. 冰爽站等）查看是否有以下产品。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(5)">* Q3_1.<text class="rpx28 col282">请确认以下产品包装是否“英超”主题包装。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(6)">* Q4.<text class="rpx28 col282">请记录以下产品的最低价格，如有促销则记录促销价。单位为元，请记录到小数点后一位。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(7)">* Q5.<text class="rpx28 col282">请根据所有主货架的统计结果，记录主货架上饮料产品的陈列面数。</text></p>

			</div>
		</uni-popup>
	</view>
</template>

<script>
	import mixins from '@/mixins'
	import ntfy from '../../components/ntfy/index.vue';
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	export default {
		// mixins: [mixins],
		components:{ntfy,uniPopup},
		data() {
			return {
				title: 'title',
				catId:0,
				q3title:'',
				items:[],
				compareq3:[],
				shopId:0,
				type: '',
			}
		},
		onLoad(e) {
			let _that = this
			_that.catId = e.catId
			_that.shopId = e.shopId
			noMessage() //获取标题
			function noMessage(){
				uni.getStorage({
					key:'question',
					success:res=>{
						res.data.forEach((element,index) =>{
							if(element.sn == "Q3"){
								_that.q3title = res.data[index].title
							}
						})
					}
				})
			}
			uni.getStorage({
				key:'shopId-'+this.shopId,
				success:res=>{
					console.log(res.data.q1)
					_that.items = res.data.q1
					
					// res.data.q1.forEach(element => {
					// 	element.forEach(ele =>{
					// 		if(ele.value == 2){
					// 			_that.q3.push(ele)
					// 		}
					// 	})
					// });
					//如果13问题保存过，而且q1问题没动过
					// let b = compare(res.data)
					// if(b == true){
					// 	_that.q3 = res.data
					// }else{
					// 	getQ3()
					// }
				},
				fail:res =>{
					//getQ3()
				}
			})
			function compare(data){
				uni.getStorage({
					key:'q1-'+e.catId,
					success:res =>{
						res.data.forEach(element => {
							element.forEach(ele =>{
								if(ele.value == 2){
									_that.compareq3.push(ele)
								}
							})
						});
						
					}
				})
				return true
			}
			function getQ3(){
				uni.getStorage({
					key:'q1-'+e.catId,
					success:res =>{
						res.data.forEach(element => {
							element.forEach(ele =>{
								if(ele.value == 2){
									_that.q3.push(ele)
								}
							})
						});
					}
				})
			}
		},
		onNavigationBarButtonTap(){
			if(this.type==''){
				this.type='top'
			}else{
				this.type=''
			}
		},
		methods: {
			toAnywhere(index){
				if(index == 1){
					mixins.navigate('../index/lixian_steps?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==2){
					mixins.navigate('../q1/q1?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==3){
					mixins.navigate('../q1/q2?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==4){
					mixins.navigate('../q1/q3?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==5){
					mixins.navigate('../q1/q3_1?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==6){
					mixins.navigate('../q2/q4?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==7){
					mixins.navigate('../q2/q5?shopId='+this.shopId+'&catId='+this.catId);
				}
			},
			radioChange(event,index,ind){
				this.items[index][ind].q3value = +event.detail.value;
			},
			save(){
				this.items.forEach(element=>{
					element.forEach(ele=>{
						if(ele.value == 2 && !ele.q3value){
							ele['q3value'] = 2
						}
					})
				})
				uni.getStorage({
					key:'shopId-'+this.shopId,
					success:res=>{
						res.data.q1 = this.items
						uni.setStorage({
							key:'shopId-'+this.shopId,
							data:res.data,
							success:res=>{
								mixins.navigate('q3_1?shopId='+this.shopId+'&catId='+this.catId);
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.q_box{padding-top:40upx;background: #fff;border-top:1px solid #DCDCDC;border-bottom:1px solid #DCDCDC;}
	.q_item{padding: 1px 0;}
	/* .q_item:first-child{margin-top: 40upx;} */
	.q_title{margin: 10upx 25upx 47upx;}
	.q_item:first-child	.q_title{margin-top: 33upx;}
	.q_it{display: flex;justify-content: space-between;align-items: center;padding: 0 30upx 0 24upx;margin-bottom: 40upx;}
	.q_it image{width:140upx;height:140upx;background:rgba(255,255,255,1);border:1px solid rgba(220,220,220,1);}
	.q_it_con{width: 435upx;height: 140upx;margin-left: 16upx;}
	.q_it_con p{display: block;width: 100%;}
	.q_it_con p:first-child{margin: 14upx 0 22upx;}
	.q_it_con p:nth-of-type(2){padding:0 4px;display:inline;line-height:42upx;background:rgba(234,234,234,1);}
	.q_it_rd{width: 86upx;display: flex;flex-wrap: wrap;height: 140upx;}
	.q_it_rd label{display: flex;align-items: center;height: 40upx;line-height: 40upx;margin:16upx 0;}
	.q_it_rd label:nth-of-type(2){margin-bottom: 14upx;}
	/* .q_it_rd radio{width: 36upx;height: 36upx;transform:scale(0.8);margin-right: 26upx;} */
	
	.but88{height: 80upx;margin-top: 65upx;margin-bottom: 30upx;}
	.u_p >>> .uni-popup{height: unset !important;top:88upx;}
	.u_p_box p{line-height: 50upx;margin: 0 34upx;text-align: left;margin-bottom: 65upx;}
	p.u_p_back{overflow: hidden;width:210upx;height:48upx;margin:30upx 14upx 40upx;display: flex;align-items: center;justify-content: center;background:rgba(255,228,231,1);border-radius:0px 4upx 4upx 0px;}
	p.u_p_back:before{content: '';margin-left: -34upx;width: 36upx;height: 48upx;box-sizing: border-box;border: 24upx solid #fff;border-right-color: transparent;}
	
	page >>> .uni-radio-input{margin-right:26upx;box-sizing: border-box;width: 36upx;height: 36upx;background-color: #fff !important;border-color: #CDC2C2 !important;}
	page >>> uni-radio .uni-radio-input.uni-radio-input-checked:before{content: '';width:24upx;height:24upx;background:rgba(251,0,26,1);border-radius:50%;}
</style>
